<template>
  <div class="app-wrapper">
    <headerTitle :titleList="titleList" :hideButton="true" />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="tab-container">
          <div class="con-title">新建业务流程</div>
          <el-form
            style="width: 78%; "
            ref="ruleForm1"
            :model="infoForm"
            label-width="100px"
            autocomplete="off"
          >
            <el-form-item label="业务名称" prop="name">
              <el-input
                type="text"
                style="width: 40%"
                placeholder="请输入业务名称"
                v-model="infoForm.name"
                maxlength="16"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="业务描述">
              <el-input
                type="textarea"
                style="width: 62%"
                placeholder="请输入业务描述"
                v-model="infoForm.sessionId"
                maxlength="100"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="流程配置">
              <el-row>
                <el-col :span="14">
                  <el-transfer 
                  v-model="outputListTemp" 
                  :data="inputList" 
                  target-order="push" 
                  :titles="['待选流程列表', '已选流程列表']"
                  @right-check-change="rightCheck">
                </el-transfer>
                </el-col>
                <el-col :span="4" style="margin-top: 95px;">
                  <div style="margin-bottom: 10px;">
                    <el-button icon="el-icon-arrow-up" circle @click="upData"></el-button>
                  </div>
                  <div>
                    <el-button icon="el-icon-arrow-down" circle @click="downData"></el-button>
                  </div>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>

          <div style="width: 78%; margin-left: 70px">
            <el-button size="mini" type="default" @click="cancel()"
              >取消</el-button
            >
            <el-button
              size="mini"
              type="primary"
              @click="saveAdd()"
              >保存</el-button
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import MD5 from "js-md5";
import HeaderTitle from "@/components/Headertitle/index";
import {
  fetchAdd,
  fetchGetData,
  fetchDetail,
} from "@/api/systemapi/restmanage.js";
export default {
  components: {
    HeaderTitle,
  },
  data() {
    const generateData = _ => {
        const data = [];
        const cities = ['朗读声明', '合同签字', '人脸识别', '问卷', '风险揭示'];
        cities.forEach((city, index) => {
          data.push({
            label: city,
            key: index,
          });
        });
        return data;
      };
    return {
      outputListTemp:[],
      tempSelectionKeys:[],
      inputList: generateData(),
      // value: [1, 4],
      entNum: "",
      titleList: [{ title: "新建业务流程" }],
      organprops: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true,
      },
      type: "", //查看编辑新增
      addRelated: true, // add相关控件隐藏显示
      viewShow: true, // 查看展示
      editid: "", // id
      treeData: null,
      infoForm: {
        name: "", // 视讯号码
        remark: "", // 密码
        sort: "",
        title:"",//标题
        content:"",//内容
        config:[]//流程配置
      },
      addrules: {
        name: [
          { required: true, message:"请输入名称", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1到 16个字符",
            trigger: "blur",
          },
        ],
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      ccodShow: false,
      zsAudioStatus: "",
      
    };
  },
  mounted() {
    const { entNum } = this.$route.query;
    this.entNum = entNum;
    this.type = this.$route.query.type;
    if (this.type == "2") {
      this.titleList[1].title = "查看小休";
      this.viewShow = false;
      this.getEditData(this.$route.query.id);
    }
  },
  methods: {
    // 穿梭框右侧列表元素被用户选中 / 取消选中时触发
    rightCheck(selectionKeys, changeKeys){
      this.tempSelectionKeys = selectionKeys;
    },
    upData(){//上移
				if(this.tempSelectionKeys.length > 1){
					this.$message({
						type: 'warning',
						message: '仅支持单选调顺序'
					});
					return ;
				}else if(this.tempSelectionKeys.length == 0){
					this.$message({
						type: 'warning',
						message: '请选择流程后再移动'
					});
					return ;
				}
      let indexNum = 0;
      for(let i=0; i<this.tempSelectionKeys.length; i++){
        indexNum = this.outputListTemp.indexOf(this.tempSelectionKeys[i])
        if(indexNum > 0){
          this.outputListTemp.splice(indexNum - 1, 0, this.tempSelectionKeys[i]);
          this.outputListTemp.splice(indexNum + 1, 1);
        }
      }
    },
    downData(){//下移
				if(this.tempSelectionKeys.length > 1){
					this.$message({
						type: 'warning',
						message: '仅支持单选调顺序'
					});
					return ;
				}else if(this.tempSelectionKeys.length == 0){
					this.$message({
						type: 'warning',
						message: '请选择流程后再移动'
					});
					return ;
				}
        let indexNum = 0;
        for(let i=0; i<this.tempSelectionKeys.length; i++){
          indexNum = this.outputListTemp.indexOf(this.tempSelectionKeys[i]);
          if(indexNum > -1 && indexNum != this.outputListTemp.length - 1){
            this.outputListTemp.splice(indexNum + 2, 0, this.tempSelectionKeys[i]);
            this.outputListTemp.splice(indexNum, 1);
          }
        }
    },
    cancel() {
      this.$router.push({
        name: "processmanage",
        params: { entNum: this.entNum },
      });
    },
    getEditData(id) {
      fetchDetail({ id: id }).then((res) => {
        this.infoForm = res.data;
      });
    },
    saveAdd() {
      const p1 = new Promise((resolve, reject) => {
        this.$refs["ruleForm1"].validate((valid) => {
          if (valid) {
            resolve();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      });
      Promise.all([p1]).then(() => {
        fetchAdd({ ...this.infoForm }).then((response) => {
          if (response.code == 0) {
            this.cancel();
          } else {
            this.$message({
              type: "error",
              message: response.msg,
            });
          }
        });
      });
    },
    // 批量导入文件
    httpRequestExport(param) {
      console.log(param, "param");
      let fileObj = param.file; // 相当于input里取得的files
      console.log(fileObj, "fileObj");
      let fd = new FormData(); // FormData 对象
      fd.append("file", fileObj); // 文件对象
      fd.append("meetingId", this.formObj.meetingId); // 文件对象
      fd.append("sessionId", this.formObj.sessionId); // 文件对象
      fd.append("agentId", this.formObj.agentId); // 文件对象
      fd.append("fileType", this.formObj.fileType); // 文件对象
      fd.append("skillId", this.formObj.skillId); // 文件对象
      fd.append("remark", this.formObj.remark); // 文件对象
      console.log(fd, "fd");
      fetchAdd(fd).then((res) => {
        if (res.code == 0) {
          this.dialogVisible = false;
          this.fetchData();
          param.file = null
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  .app-container {
    .block {
      width: 100%;
      height: 100%;
      background: #fff;
      .tab-container {
        width: 100%;
        margin-top: 15px;
        .con-title {
          margin-bottom: 15px;
          font-size: 14px;
          color: #666;
          font-weight: bold;
          margin-left: 10px;
        }
        .elform-item {
          display: flex;
          .item {
            width: 40%;
            margin-right: 20px;
          }
          .item-span {
            color: #ccc;
            font-size: 13px;
          }
        }
      }
    }
  }
}
</style>
